import React, { memo, useEffect } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';

import MusicThemeHeaderRcm from '@/components/theme-header-rcm';
import MusicSongsCover from '@/components/songs-cover';

import { getHotRecommendAction } from '../../store/actionCreators';

import { HOT_RECOMMEND_LIMIT } from '@/common/contants';

import { 
    HotRecommendWrapper 
} from './style';


export default memo(function MusicHotRecommend() {

    const { hotRecommends } = useSelector(state => ({
        hotRecommends: state.getIn(['recommend','hotRecommends'])
    }), shallowEqual);

    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(getHotRecommendAction(HOT_RECOMMEND_LIMIT));
    },[dispatch]);

    return (
        <HotRecommendWrapper>
            <MusicThemeHeaderRcm title="热门推荐" keywords={['华语','流行','民谣','摇滚','电子']} />
            <div className="recommend-list">
                {
                    hotRecommends.map((item, index) => {
                        return <MusicSongsCover key={item.id} info={item} />
                    })
                }
            </div>
        </HotRecommendWrapper>
    );
})